import React, { Component } from 'react';
import './index.scss';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabsList: [{
        text: '推荐',
        value: 1
      }, {
        text: '关注',
        value: 2
      }],
      activedTab: 1
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate', nextState)
    return nextState
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate', prevState)
  }

  handleSwitchTab(value) {
    console.log('切换顶部tab', value);
    this.setState({
      activedTab: value
    });
  }

  render() {
    const translateXStyle = {
      transform: `translateX(${(this.state.activedTab - 1) * 70}px)`
    };

    return (
      <div className="homeTopNav">
        <div className='homeTopTabsNav'>
          {
            this.state.tabsList.map((item, index) => {
              return (
                <span
                  key={item.value}
                  className={`tabItem ${this.state.activedTab === item.value ? 'actived' : ''}`}
                  onClick={this.handleSwitchTab.bind(this, item.value)}
                >
                  {item.text}
                </span>
              )
            })
          }
          <div className='activedLine' style={translateXStyle}></div>
        </div>
        <div className='homeTopFuncNav'>
          <i className='iconfont icon-sousuo' />
          <i className='iconfont icon-shouye2' />
        </div>
      </div>
    )
  }
}